<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>simple</title>
        <link rel="stylesheet" href="./css/bootstrap.css" />
        <!-- 切换成完全体  -->
        <!-- <script src="./js/bootstrap.js"></script> -->
        <script src="./js/bootstrap.bundle.js"></script>
        <link rel="stylesheet" href="./css/bs-slide.css" ></link>
 
    </head>
    <body>
        <button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
        <script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));

        </script>
    </body>
</html>